
<style scoped lang="less">
.item-box{
  display: inline-block;
  position: relative;
  transition: all ease-in-out 100ms;
  height:v-bind(itemSize);
  padding: v-bind(gap);
  box-sizing: border-box;
  border-radius: 10px;
  &:hover{
    transform: scale(1.1);
  }
  &:active{
    opacity: 0.7;
    transform: translate(1px,3px);
  }
  &__icon{
    object-fit: fill;
    height: 100%;
  }
}
</style>
<template>
  <div class="item-box" @click="open"  :id="imageId" v-toolTip="name" toolTip-position="top" toolTip-gap="45">
    <img :src="img" class="item-box__icon" >
  </div>
</template>

<script lang="ts" setup >
import DockBarStore from './store'
import mainStore from '@/store/main'
import WindowStore from '@/components/window/src/store'
const dockBarStore = DockBarStore()
const windowStore = WindowStore()

import {computed} from "vue";



const props = defineProps({
  item:{ type:Object, default: () => ({}) }
})

// 元素大小
const itemSize = computed(_ => dockBarStore.$state.itemSize + 'px')
const gap = computed(_=> dockBarStore.$state.gap + 'px')

const img = computed(_ => props.item?.img)
const name = computed( _ => mainStore.getApplication(props?.item?.id)?.name || '未定义')
const imageId = computed( _ => 'dock-image-' + props.item?.id)

/** 左键点击 */
const open = () => {
  const windowItem = Array.from(windowStore.$state.minSizeList).find( (ele:any) => ele === props.item )
  //@ts-ignore
  if (!windowItem) return false
  windowItem.zIndex =  windowStore.$state.zIndex + 1
  windowStore.removeMinSizeById(windowItem)
}
</script>

